<template>
  <div class="layout-wrap">
    <el-container class="main-area">
      <el-main class="main-view" >
        <div class="header-area">
          <template v-if="true">
            <component
                ref="biz"
                v-if="true"
                :is="compsName"
                :formJson="compOptions.formJson"
                :formConfig="compOptions.formParams"
                :templateInfo="compOptions.templateInfo"
                :device="compOptions.device"
                :apiType="compOptions.apiType"
            />
          </template>
        </div>
        <div class="main-view-area biz_area_info" v-if="true">
          <transition name="el-fade-in-linear">
            <router-view/>
          </transition>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {Popup} from "vant";
import {setRem2} from "@/utils/rem";
import {AndroidToWeb, buildParentApi} from "@/utils/designer/util";
let buildParent = buildParentApi();

export default {
  name: 'LayoutBox2',

  components: {
    Popup,
    RoomScreen: () => import("@/views/scenes/room_screen.vue"),
  },

  data() {
    return {
      compsName: 'RoomScreen',
      templateParams: Object(),
      compOptions2: {
        formParams: {},
        formJson: {
          widgetList: [],
          formConfig: {
            devType: true
          },
        },
        templateInfo: Object(),
        apiType: 0,
        device: {
          type: Object,
          default: 'Android'
        }
      },
      compOptions: {
        "formParams": {
          "devType": true
        },
        "formJson": {
          "widgetList": [
            {
              "type": "scene-head",
              "icon": "text-field",
              "formItemFlag": false,
              "shown": true,
              "category": "scene",
              "categoryType": "header",
              "screenDataType": "",
              "devType": "common",
              "title": "通用-头部",
              "mapperFiles": [],
              "options": {
                "name": "scenehead36100",
                "hidden": false,
                "config": "headerConfig",
                "headerConfig": {
                  "headHide": false,
                  "content": "",
                  "contentShow": false,
                  "contentHide": false,
                  "contentLocation": "connectBoxLeft",
                  "headHeight": 150,
                  "deptFontWeight": "normal",
                  "deptFontColor": "#000",
                  "deptFontSize": 68,
                  "fontColor": "#333333",
                  "backgroundColor": "#FFFFFF",
                  "timeValue": "YYYY/MM/DD",
                  "imageUrl": "",
                  "changePosition": false,
                  "dateHide": false,
                  "dateShow": true,
                  "dataHoursMinBack": "#FFFFFF",
                  "dataHoursMinHeight": 140,
                  "dataHoursMinWidth": 263,
                  "transverse": true,
                  "split": 0.5,
                  "viewMode": 1,
                  "logoVisit": true
                },
                "label": "scene-head"
              },
              "id": "scenehead36100"
            },
            {
              "type": "scene-DRC-single-info",
              "icon": "text-field",
              "formItemFlag": false,
              "shown": true,
              "category": "scene",
              "categoryType": "room-DRC",
              "screenDataType": "DRC-doctor",
              "devType": "DRC",
              "title": "诊室-单人v2",
              "mapperFiles": [],
              "options": {
                "name": "sceneDRCsingleinfo59387",
                "hidden": false,
                "config": "sceneDRCSingleInfoConfig",
                "sceneDRCSingleInfoConfig": {
                  "headHeight": 870,
                  "backgroundColor": "rgba(255, 255, 255, 0)",
                  "waitMode": 1,
                  "checkList": [
                    3
                  ],
                  "currentPatientSign": "就诊",
                  "waitPatientSign": "待诊",
                  "doctorFontWeight": "normal",
                  "roomNameKey": "roomName",
                  "registerObjNameKey": "registerObjName",
                  "deptRoomPosition": false,
                  "dataSource": 0,
                  "waitPatientType": 1,
                  "doctorOrder": 1,
                  "registerSource": 2,
                  "relationRegister": true
                },
                "label": "scene-drc-single-info"
              },
              "id": "sceneDRCsingleinfo59387"
            }
          ],
          "formConfig": {
            "devType": false,
            "modelName": "formData",
            "refName": "vForm",
            "rulesName": "rules",
            "labelWidth": 80,
            "labelPosition": "left",
            "size": "",
            "labelAlign": "label-left-align",
            "cssCode": "",
            "customClass": [],
            "functions": "",
            "layoutType": "PC",
            "jsonVersion": 3,
            "onFormCreated": "",
            "onFormMounted": "",
            "onFormDataChange": "",
            "parentInfo": {
              "backgroundColor": "rgba(255,255,255,0)",
              "backgroundImage": "",
              "compBiz": true
            },
            "viewName": "/tpleditor/design/#/DRCbizList"
          }
        },
        "templateInfo": {
          "title": "桐乡-综合业务-诊室",
          "resolution": "1080*1920",
          "tplType": 1,
          "devType": 3,
          "bizType": 0,
          "apiType": 0,
          "uuid": "",
          "remark": "桐乡综合业务",
          "url": "/tpleditor/design/#/DRCbizList",
          "indexUrl": "",
          "layout": null,
          "layoutConfig": null,
          "parentOptions": null,
          "waitNum": null,
          "deptIds": null,
          "formConfig": {
            "devType": false,
            "modelName": "formData",
            "refName": "vForm",
            "rulesName": "rules",
            "labelWidth": 80,
            "labelPosition": "left",
            "size": "",
            "labelAlign": "label-left-align",
            "cssCode": "",
            "customClass": [],
            "functions": "",
            "layoutType": "PC",
            "jsonVersion": 3,
            "onFormCreated": "",
            "onFormMounted": "",
            "onFormDataChange": "",
            "parentInfo": {
              "backgroundColor": "rgba(255,255,255,0)",
              "backgroundImage": "",
              "compBiz": true
            },
            "viewName": "/tpleditor/design/#/DRCbizList"
          },
          "widgetList": [
            {
              "type": "scene-head",
              "icon": "text-field",
              "formItemFlag": false,
              "shown": true,
              "category": "scene",
              "categoryType": "header",
              "screenDataType": "",
              "devType": "common",
              "title": "通用-头部",
              "mapperFiles": [],
              "options": {
                "name": "scenehead36100",
                "hidden": false,
                "config": "headerConfig",
                "headerConfig": {
                  "headHide": false,
                  "content": "",
                  "contentShow": false,
                  "contentHide": false,
                  "contentLocation": "connectBoxLeft",
                  "headHeight": 150,
                  "deptFontWeight": "normal",
                  "deptFontColor": "#000",
                  "deptFontSize": 68,
                  "fontColor": "#333333",
                  "backgroundColor": "#FFFFFF",
                  "timeValue": "YYYY/MM/DD",
                  "imageUrl": "",
                  "changePosition": false,
                  "dateHide": false,
                  "dateShow": true,
                  "dataHoursMinBack": "#FFFFFF",
                  "dataHoursMinHeight": 140,
                  "dataHoursMinWidth": 263,
                  "transverse": true,
                  "split": 0.5,
                  "viewMode": 1,
                  "logoVisit": true
                },
                "label": "scene-head"
              },
              "id": "scenehead36100"
            },
            {
              "type": "scene-DRC-single-info",
              "icon": "text-field",
              "formItemFlag": false,
              "shown": true,
              "category": "scene",
              "categoryType": "room-DRC",
              "screenDataType": "DRC-doctor",
              "devType": "DRC",
              "title": "诊室-单人v2",
              "mapperFiles": [],
              "options": {
                "name": "sceneDRCsingleinfo59387",
                "hidden": false,
                "config": "sceneDRCSingleInfoConfig",
                "sceneDRCSingleInfoConfig": {
                  "headHeight": 870,
                  "backgroundColor": "rgba(255, 255, 255, 0)",
                  "waitMode": 1,
                  "checkList": [
                    3
                  ],
                  "currentPatientSign": "就诊",
                  "waitPatientSign": "待诊",
                  "doctorFontWeight": "normal",
                  "roomNameKey": "roomName",
                  "registerObjNameKey": "registerObjName",
                  "deptRoomPosition": false,
                  "dataSource": 0,
                  "waitPatientType": 1,
                  "doctorOrder": 1,
                  "registerSource": 2,
                  "relationRegister": true
                },
                "label": "scene-drc-single-info"
              },
              "id": "sceneDRCsingleinfo59387"
            }
          ],
          "coverImage": "/upload/design/cover/1881218859884990466.png",
          "browserType": "1",
          "targetAddress": "",
          "id": "1891739586996322306",
          "status": "PASS",
          "informationEnum": null,
          "ruleContent": null
        },
        "apiType": 0,
        "device": {
          "default": "Android"
        }
      }
    }
  },

  computed: {
    //获取Loading状态
    loading() {
      return this.$store.getters['layout/getLoading']
    },
  },

  mounted() {
    window.AndroidToWeb = AndroidToWeb;
    this.$nextTick(async () => {
      await this.setRem();
      this.initParams();
      await this.modelDetails();
      this.deviceInfo();
    })
  },

  methods: {
    /**
     * 适配2k 4k
     */
    setRem() {
      const {resolution = '1080*1920'} = this.compOptions.templateInfo;
      if (resolution) {
        // 重新计算尺寸
        setRem2(19.2, resolution.split("*")[0]);
        window.onresize = function () {
          setRem2(19.2, resolution.split("*")[0]);
        };
      }
    },

    /**
     * 获取路由的参数
     * devType: 2 模拟数据 1:Api数据
     */
    initParams() {
      // http://localhost:8080/#/DRCbizList?modelId=1891739586996322306
      const {modelId = null, devType = '1', device = 'Android'} = this.$route.query;
      if(!!modelId){
        Reflect.set(this.templateParams, 'modelId', modelId);
        Reflect.set(this.templateParams, 'devType', devType);
        Reflect.set(this.templateParams, 'device', device);
        localStorage.setItem('templateRouteInfo', JSON.stringify(this.templateParams));
      }
      if (devType) {
        Reflect.set(this.compOptions.formParams, 'devType', parseInt(devType) !== 2);
      } else {
        Reflect.set(this.compOptions.formParams, 'devType', true);
      }
      // 环境
      Reflect.set(this.compOptions.device, 'default', device);
      // 设置环境
      window.environment = device;
    },

    /**
     * 通过路由的参数-获取模版详情
     */
    async modelDetails() {
      // 二次请求
      let params = Object();
      let modelId = this.$route.query?.modelId;
      if (!modelId) {
        let templateRouteInfo = JSON.parse(localStorage.getItem('templateRouteInfo'));
        modelId = templateRouteInfo.modelId
      }
      Reflect.set(params, 'messageId', modelId);
      Reflect.set(params, 'informationType', 'MODEL');
      let {state, result} = await this.$store.dispatch('layout/setDevTemplateInfo', params);
      if (state) {
        Reflect.set(this.compOptions, 'templateInfo', result);
        const {apiType = 0, widgetList = Array(), formConfig = Object()} = result;
        Reflect.set(this.compOptions, 'apiType', apiType);
        // 模拟数据&api数据-取反(真实数据)
        Reflect.set(formConfig, 'devType', (formConfig.devType))
        Reflect.set(this.compOptions.formJson, 'widgetList', widgetList);
        Reflect.set(this.compOptions.formJson, 'formConfig', formConfig);
      }
    },

    /*
    * 获取设备的id和设备的ip
    * */
    deviceInfo(){
      buildParent.executeParentMethod('deviceInfo', null, 'deviceInfo');
    }
  },
}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
